<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
      <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<div class="menuicon">
<a href="#">
<div class="fa fa-bug"></div>
<div class="title">My blog</div>
</a>
<a href="#">
<div class="fa fa-user"></div>
<div class="title">About</div>
</a>
<a href="#">
<div class="fa fa-camera"></div>
<div class="title">Portfolio</div>
</a>
<a href="#">
<div class="fa fa-search"></div>
<div class="title">Search</div>
</a>
<a href="#">
<div class="fa fa-envelope"></div>
<div class="title">Contact</div>
</a>
</div>
<style>
.menuicon {text-align: center; font-size: 0;}
.menuicon a {position: relative; display: inline-block; *display: inline; zoom: 1; width: 100px; height: 120px; text-align: center; color: PaleGoldenrod; text-shadow: 1px 1px 0 DarkGoldenrod; text-decoration: none; background: #D3AE4E; vertical-align: top; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all;}
.menuicon a .fa {position: relative; top: 10px; padding: 10px; border-radius: 200px; border: 2px solid white; font-size: 40px;}
.menuicon a .title {font-size: 20px; line-height: 60px;}
.menuicon a:hover {-webkit-transform: scale(0.90,0.90); -moz-transform: scale(0.90,0.90); transform: scale(0.90,0.90);}
.menuicon a:nth-of-type(odd) {background: #BF9830;}
.menuicon a:first-child {background: #A67900; width: 200px;}
.menuicon a:first-child .fa {border: 0; font-size: 60px;}
.menuicon a:first-child .title {font-size: 30px; line-height: 20px; font-style: italic;}
</style>
    </h:body>
</html>

